import React from 'react';
import {Button,Form,Input,Row,Col,message} from 'antd';
import * as Utils from "../../../common/utils";
import qs from 'qs';
import * as Constant from '../../../common/const';

const FormItem = Form.Item;

class LimitIpModal extends React.Component{
    constructor(props) {
        super(props);
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if(!err){
                this.props.saveOrEdit(qs.stringify(values)).then(res => {
                    if(res && Constant.REQUEST_SUCCESS == res.code){
                        message.success(Constant.OPERATION_SUCCESS_TIP,Constant.AUTO_DISAPPEAR_TIME);
                        this.props.cancel(true);
                    }
                });
            }
        });
    }
    validateStartIp = (rule,value,callback) => {
        //开始IP不能大于结束IP
        const endIp = this.props.form.getFieldValue('endIp');
        Utils.validateStartIp(rule,value,callback,endIp);
        if(this.props.form.getFieldValue('endIp') && this.props.form.getFieldError('endIp')){
            this.props.form.validateFields(['endIp'],{ force: true });
        }
    }
    validateEndIp = (rule,value,callback) => {
        //结束IP不能小于开始IP
        const startIp = this.props.form.getFieldValue('startIp');
        Utils.validateEndIp(rule,value,callback,startIp);
        if(this.props.form.getFieldValue('startIp') && this.props.form.getFieldError('startIp')){
            this.props.form.validateFields(['startIp'],{ force: true });
        }
    }
    render(){
        const {getFieldDecorator} = this.props.form;
        const ipFormItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 17},
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 16,
                    offset: 8,
                },
            },
        };

        return (
            <div>
                <Form onSubmit={this.handleSubmit}>
                    <FormItem>
                        {getFieldDecorator('id', {
                            initialValue:this.props.ipInfo && this.props.ipInfo.id,
                        })(
                            <Input type={'hidden'}/>
                        )}
                    </FormItem>
                    <Row>
                        <Col>
                            <FormItem label={'IP:'} {...ipFormItemLayout} className={'ant-col-xs-12'}>
                                {getFieldDecorator('startIp', {
                                    rules: [
                                        {
                                            required: true, message: '请输入开始IP!',
                                        },{
                                        validator: this.validateStartIp,
                                    }],
                                    initialValue:this.props.ipInfo && this.props.ipInfo.startIp,
                                })(
                                    <Input style={{textAlign: 'center'}} maxLength={255}/>
                                )}
                            </FormItem>
                            <FormItem className={'ant-col-xs-2'}>
                                <Input style={{
                                    width: 30,
                                    border: 0,
                                    pointerEvents: 'none',
                                    backgroundColor: '#fff'
                                }} placeholder={'-'} disabled/>
                            </FormItem>
                            <FormItem className={'ant-col-xs-9'}>
                                {getFieldDecorator('endIp', {
                                    rules: [{
                                        required: true, message: '请输入结束IP!',
                                    },{
                                        validator: this.validateEndIp,
                                    }],
                                    initialValue: this.props.ipInfo && this.props.ipInfo.endIp,
                                })(
                                    <Input style={{textAlign: 'center'}} maxLength={255}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    {<FormItem {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit">保存</Button>
                        <Button type="primary" onClick={this.props.cancel}>返回</Button>
                    </FormItem>}
                </Form>
            </div>
        );
    }
}

const LimitIpModalForm = Form.create()(LimitIpModal);
export default LimitIpModalForm;